<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui-slide.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css"/>
    <style type="text/css">
        body {
            background: #f4f4f4;
            font-size: 14px;

        }

        .aui-slide-page-active {
            background: #ed9b9b;
        }

        nav {
            overflow: hidden;
        }

        .icon {
            margin: 0;
            padding-bottom: 0 !important;
        }

        .icon li {
            width: 20%;
            float: left;
            font-size: 12px;
            position: relative;
            padding-bottom: 5px !important;
        }

        .aui-list-view.aui-grid-view .aui-list-view-cell:after {
            border-bottom: 1px solid #c8c7cc;
        }

        .aui-list-view.aui-grid-view .aui-list-view-cell .aui-img-body {
            font-size: 12px;
        }

        .aui-list-view-cell:after {
            right: -125% !important;
        }

        .title span {
            position: relative;
            display: inline-block;
            padding: 0 10px;
        }

        .title span:before,
        .title span:after {
            position: absolute;
            content: '';
            width: 100%;
            height: 2px;
            top: 50%;
            transform: translateY(-50%);
        }

        .title span:before {
            right: -100%;
            background: linear-gradient(to right, #fc8989, transparent);
        }

        .title span:after {
            left: -100%;
            background: linear-gradient(to left, #fc8989, transparent);
        }

        .proList img {
            width: 33.333%;
            float: left;
            box-shadow: 0px 0px 0px 1px #d9d9d9;
        }

        .adv img {
            width: 100%;
        }

        .aui-img-body > .aui-ellipsis-2 {
            height: 42px;
        }

        .aui-icon-locationfill {
            color: #00a9e3 !important;
            margin: 0 !important;
        }

        .aui-icon-attentionfill {
            color: #ccc !important;
            margin: 0 !important;
        }

        .supplierList {
            margin-top: 10px;
        }

        .supplierListTitle {
            background: #fff;
            font-size: 12px;
        }

        .navImg img {
            width: 40%;
            vertical-align: bottom;
        }

        .aui-grid-sixteen li:after {
            border: 0;
        }

        .aui-slide-node div {
            background-size: cover;
            background-position: center;
            height: 100%;
        }

        .toutiaoTile {
            height: 25px;
            line-height: 25px;
            overflow: hidden;
            width: calc(100% - 135px);
        }
    </style>
</head>
<body>
<header>

    <div class="slide">
        <div id="aui-slide">
            <div class="aui-slide-wrap">
                <div class="aui-slide-node ">
                    <div class="" style="background-image: url('../image/index1.jpg')"></div>
                    <!--<img src=""/>-->
                </div>
                <div class="aui-slide-node ">
                    <div class="" style="background-image: url('../image/index2.jpg')"></div>
                    <!--<img src="../image/index2.jpg"/>-->
                </div>
                <div class="aui-slide-node ">
                    <div class="" style="background-image: url('../image/index3.jpg')"></div>
                    <!--<img src="../image/index3.jpg"/>-->
                </div>
            </div>
            <div class="aui-slide-page-wrap"><!--分页容器--></div>
        </div>
    </div>
    <!--<div tapmode onclick="openToTwo('my/orderManage')">-->
    <!--<img style="width: 100%" class="aui-img-object" src="../image/ceshi.jpg">-->
    <!--</div>-->
    <nav class="categoryNav">
        <ul class="aui-grid-sixteen aui-padded-b-10 aui-padded-t-5" id="categoryNav-content">
            <!--<li class="aui-col-xs-3 aui-padded-0   aui-margin-t-10 aui-text-center">-->
            <!--<span class=" aui-padded-0  aui-text-primary "><img class="radius-50 aui-col-xs-6 float-none"-->
            <!--src="../image/meishi.png"></span>-->
            <!--<p>美食</p>-->
            <!--</li>-->

        </ul>
    </nav>
</header>

<div class="supplierListTitle  aui-padded-10 aui-border-t aui-margin-t-10 font-weight-700">
    <!--<i class="aui-iconfont aui-icon-locationfill"></i>-->
    <span class="aijiangli-bg aui-block aui-pull-left aui-margin-r-5" style="width: 3px;height: 22px;"></span>
    <h5 class="font-black">热门商品</h5>
</div>

<img src="../image/pro1.jpg" class="img100 aui-margin-b-10" tapmode onclick="goToGoodInfo('4787','')" alt="">
<img src="../image/pro2.jpg" class="img100 aui-margin-b-10" tapmode onclick="goToGoodInfo('4791','')" alt="">
<img src="../image/pro3.jpg" class="img100 " tapmode onclick="goToGoodInfo('4282','')" alt="">

<!--<img src="../image/pro1.jpg" class="img100 aui-margin-b-10" >-->
<!--<img src="../image/pro2.jpg" class="img100 aui-margin-b-10" >-->
<!--<img src="../image/pro3.jpg" class="img100 " >-->

<div class=" contain supplierList ">
    <div class="supplierListTitle  aui-padded-10">
        <i class="aui-iconfont aui-icon-locationfill"></i>
        附近的商家
    </div>

    <div class="kongshuju">
        <p>暂无数据</p>
    </div>
    <ul class="aui-list-view" id="supplier-content">
        <!--<li class="aui-list-view-cell aui-img" tapmode onclick="openToTwo('shopInfo_win')">-->
            <!--<img class="aui-img-object aui-pull-left" src="../image/dongtai.jpg">-->
            <!--<div class="aui-img-body aui-arrow-right">-->
                <!--<div class="aui-ellipsis-2">广州商城平台</div>-->
                <!--<p>-->
        <!--<span class="view aui-col-xs-7">-->
        <!--<i class="aui-iconfont aui-icon-attentionfill"></i>-->
        <!--289-->
        <!--</span>-->
                    <!--<span class="location aui-col-xs-5">-->
        <!--&lt;!&ndash;<i class="aui-iconfont aui-icon-right font-black"></i>&ndash;&gt;-->
        <!--</span>-->
                <!--</p>-->
            <!--</div>-->
        <!--</li>-->

    </ul>
</div>
<script id="categoryNav-template" type="text/x-dot-template">
    {{ for(var i in it){ }}
    {{?i<8}}
    <li class="aui-col-xs-3 aui-padded-0 aui-margin-t-10 aui-text-center " tapmode
        onclick="getSupplierListByClick('{{=it[i].str_id}}')">
        <span class=" aui-padded-0  aui-text-primary"><img class="radius-50 aui-col-xs-6 float-none"
                                                           src="../image/{{=it[i].str_style}}.png"></span>
        <p class="aui-text-center aui-col-xs-12">{{=it[i].str_name}}</p>
    </li>
    {{}}}
    {{}}}
</script>

<script id="supplier-template" type="text/x-dot-template">
    {{ for(var i in it){ }}
    <li class="aui-list-view-cell aui-img" tapmode onclick="openShopInfo('{{=it[i].supplier_id}}')">
        <img class="aui-img-object aui-pull-left" src="{{=it[i].logo}}">
        <div class="aui-img-body aui-arrow-right">
            <div class="aui-ellipsis-2">{{=it[i].company_name}}</div>
            <p>
                    <span class="view aui-col-xs-8">
                         <!--<i class="aui-iconfont aui-icon-attentionfill"></i>-->
                        已有{{=it[i].click_count}}人付款
                    </span>
                <span class="location aui-col-xs-4 dispalyNone">
                        <!--<i class="aui-iconfont aui-icon-locationfill"></i>-->
                        <i class="aui-iconfont aui-icon-right"></i>
                        <input type="hidden" class="loactionInfo" lat="{{=it[i].latitude}}" lon="{{=it[i].longitude}}"
                               value="">

                            <span class="disDanceValue ">298.5</span>km
                    </span>
            </p>
        </div>
    </li>
    {{}}}
</script>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/myInfo.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/echo.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<!--<script type="text/javascript" src="../script/md5.min.js"></script>-->
<script type="text/javascript">
    var page = 1, categoryId = "", isLock = false;
    apiready = function () {
        api.parseTapmode();
        getCategory();
        getLocation();
        //监听是否达到底部上拉加载
        api.addEventListener({
            name: 'scrolltobottom'
        }, function (ret, err) {
//            page++;
//            if (isLock == false) {
//                getSupplierList(categoryId);
//            }
        })
    }
    $(function () {
        textMove(".toutiaoTile ul", 3000, $(".toutiaoTile ul li").height())
    })
    slide();
    ///切换左侧分类的样式

    //$(document).on("click",".contain-left li",function(){
    function changeCategory(obj) {
        $(".contain-left li").removeClass("active").addClass("aui-border-l").addClass("aui-border-r");
        $(obj).addClass("active").removeClass("aui-border-l").removeClass("aui-border-r");
        if ($(obj).index() == 0) {
            $(".tuijian").css({"display": "block"});
            $(".other").css({"display": "none"});
        } else {
            $(".tuijian").css({"display": "none"});
            $(".other").css({"display": "block"});
        }
    }
    function slide() {
        var slide3 = new auiSlide({
            container: document.getElementById("aui-slide"),
            // "width":300,
            "height": 160,
            "speed": 500,
            "autoPlay": 6000, //自动播放
            "loop": true,
            "pageShow": true,
            "pageStyle": 'dot',
            'dotPosition': 'center'
        })
    }
    //单击nav链接到searchInfo页面时候传参数
    function toSearch(obj) {
        var searchValue = $(obj).find(".aui-img-body").text();
        api.openWin({
            name: "searchInfo",
            url: "searchInfo_win.html",
            pageParam: {
                searchValue: searchValue
            }
        })
    }


    function funcGotoBakHome(index) {
        getStorageAll();
        if (user_id) {
            api.execScript({
                name: 'root',
                script: 'randomSwitchBtnBakHome(' + index + ')'
            });
        } else {
            openTo('login_win');
        }
    }
    //提示信息
    function message() {
        api.toast({
            msg: '暂不支持',
            duration: 2000,
            location: 'middle'
        });
    }
    function getCategory() {
        var url = "app/category/supplier";
        var data = {};
        getStorageAll();
        ajaxRequest(url, 'get', data, function (ret, err) {
            getSupplierList()
            var content = $api.byId('categoryNav-content');
            var tpl = $api.byId('categoryNav-template').text;
            var tempFn = doT.template(tpl);
            $api.html(content, '');
            $api.html(content, tempFn(ret.data));
        });
    }
    function getSupplierList() {
        if (isLock)return;
        isLock = true;
        var url = "supplier/list";
        var data = {};
        data["category_id"] = categoryId;
        data["latitude"] = categoryId;
        data["longitude"] = categoryId;
        data["page"] = page;
        data["count"] = 15;
        getStorageAll();
//        alert(JSON.stringify(data))
        ajaxRequest(url, 'get', data, function (ret, err) {
            isLock = false;
            var content = $api.byId('supplier-content');
            var tpl = $api.byId('supplier-template').text;
            var tempFn = doT.template(tpl);
            if (page > 1) {
                if (!$.trim(ret.data)) {
                    isLock = true;
                }
                $api.append(content, tempFn(ret.data));
            } else {
                showNoTip(ret.data);
                $api.html(content, tempFn(ret.data));
            }

//            $api.html(content, '');
//            $api.html(content, tempFn(ret.data));
            $("#supplier-content").find(".loactionInfo").each(function () {
                var lat = $(this).attr("lat");
                var lon = $(this).attr("lon");
                $(this).parent().find(".disDanceValue").text(getTheDisance(lat, lon, myLat, myLon));
            })
        });
    }
    function getSupplierListByClick(categoryId) {
        api.openWin({
            name: "supplierList",
            url: "supplierCategoryList_win.html",
            pageParam: {
                categoryId: categoryId
            }
        })

//        categoryId = categoryIds;
//        page = 1;
//        getSupplierList()
    }

</script>
</html>